<template>
  <div class="login">
    <a-card title="登录" class="login-card">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        validateTrigger="blur"
        @finish="onFinish"
      >
        <a-form-item
          label="账户"
          name="username"
          :rules="[{ required: true, message: '请输入账户！' }]"
        >
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码！' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 6, span: 8 }">
          <a-button type="primary" html-type="submit" style="width: 200px"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
export default {
  name: "Login",
};
</script>

<script setup>
import { onMounted, reactive } from "vue";
import { setLocalStorage } from "@/utils/localData";
import { message } from "ant-design-vue";
// import { SM4Util } from 'sm4util'

const formState = reactive({
  username: "",
  password: "",
});

// onMounted(() => {
//   const sm4 = new SM4Util();
//   console.log(sm4.encryptCustom_CBC('123456', 'asdfghjklmnbvcxw,', 'mnbvcxzpoiuytre1'));
// })

const onFinish = (values) => {
  // 纯前端模拟验证，正规应当改为表单rule配置正则验证
  if (formState.username !== "admin" || formState.password !== "123456") {
    return message.error("账户或密码错误");
  }
  // 模拟token
  const obj = {
    email: "ssw184@qq.com",
    phone: "18888888888",
    sex: "男",
    name: "admin",
    token: "token",
    school: "洛阳理工",
    city: "山西",
    photo: "",
  };
  values = Object.assign(values, obj);
  setLocalStorage("user", values);
  window.location.href = "/home";
};
</script>

<style scoped lang="scss">
.login {
  height: 100vh;
  background-color: #eee;
  position: relative;

  .login-card {
    text-align: center;
    width: 450px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/* 登录自动填入时变色解决
  /deep/input:-webkit-autofill {
    -webkit-text-fill-color: #000;
    transition: background-color 50000s ease-in-out 0s;
    background: transparent;
  }
*/
</style>
